<template>
	<div id="ai">
		<div class="select ai">
			<div class="select-item ai-select-item">
				<h1>你想去哪里读大学？</h1>
				<div class="selected" @click=selected($event)>
					<div>
						<span class="span active">不限</span>
						<span class="span">本省(江苏)</span>
						<span class="span">更多地区</span>
						<span v-for='item of checkbox' class="del active">{{item}}</span>
					</div>
					<div class="cancel">
						<span>清空重选</span>
						<img :src="garbage_can" alt="" title="清空" width="15" />
					</div>
				</div>
				<div class="per-cell per-cell-2 check">
					<div class="area check-box"
						v-for='(area,index) of areas'
						@click=isChecked($event)>
						<label value=1>
							<span class="checkbox" value=1></span>{{area.dataname}}
							<input type="checkbox"
								:value="area.dataname"
								:datavalue="area.datavalue"
								v-model=checkbox
								:disabled=disabled>
						</label>
					</div>
				</div>
				<div @click=select($event)>
					<div class="sex-per">
						<h1>你想去的学校男女比例</h1>
						<div class="choice">
							<span class="active">不限</span>
							<span>男生多</span>
							<span>男女均衡</span>
							<span>女生多</span>
						</div>
					</div>
					<div class="sex-per sex-per-left">
						<h1>你想学哪些专业？</h1>
						<div class="choice">
							<div>
								<span class="active">不限</span>
								<span>更多专业</span>
							</div>
							<div class="cancel">
								<span>清空重选</span>
								<img :src="garbage_can" alt="" title="清空" width="15" />
							</div>
						</div>
					</div>
					<div class="sex-per sex-per-last sex-per-left">
						<h1>你想去的职业方向？</h1>
						<div class="choice">
							<div>
								<span class="active">不限</span>
								<span>更多职业</span>
							</div>
							<div class="cancel">
								<span>清空重选</span>
								<img :src="garbage_can" alt="" title="清空" width="15" />
							</div>
						</div>
					</div>
					<div class="submit-box"><span class="submit">生成智能志愿表</span></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	'use strict';

module['recommond-smart'] = {
	props: ['areas', 'checkbox', 'garbage_can', 'disabled'],
	template: template,
	methods: {
		selected: function selected(e) {
			var tar = e.target;
			if (tar.nodeName == 'SPAN') {
				if ($(tar).hasClass('span')) {
					if (tar.innerHTML == '更多地区' && $('.per-cell.check').css('display') == 'none') {
						$('.per-cell.check').show();
					} else if (tar.innerHTML == '更多地区' && $('.per-cell.check').css('display') == 'block') return;else {
						$('.per-cell.check').hide();
						this.checkbox = [];
						$('.bingo').removeClass('bingo');
					}
				}
				if (tar.className.indexOf('span') != -1) {
					$(tar).addClass('active').siblings('span.span').removeClass('active');
					return;
				}
				if (tar.parentNode.className.indexOf('cancel') != -1) {
					this.checkbox = [];
					$('.bingo').removeClass('bingo');
					return;
				}
				this.checkbox.splice($(tar).index() - 3, 1);
				$('.check-box label').filter(function () {
					return this.innerHTML.indexOf(tar.innerHTML) != -1;
				}).find('span').removeClass('bingo');
			}
		},
		isChecked: function isChecked(e) {
			this.$emit('isChecked', e);
		},
		select: function select(e) {
			this.$emit('select', e);
		}
	}
};
</script>
